<template>
  <!-- 一焙 -->
  <div class="container">
    <div class="cardTop">
      <div class="seachAndState">
        <el-form
          size="small"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="设备">
            <div class="select-equip">
              <el-select v-model="formInline.equip" placeholder="选择设备">
                <el-option
                  v-for="item in deviceTypes"
                  :key="item._id"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
                <!-- <el-option label="十分钟" value="Ten"></el-option>
            <el-option label="三十分钟" value="Thirty"></el-option>
            <el-option label="一小时" value="Hour"></el-option> -->
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="时间粒度">
            <el-select v-model="formInline.time" placeholder="选择时间段">
              <el-option label="分钟" value="Min"></el-option>
              <el-option label="十分钟" value="10"></el-option>
              <el-option label="三十分钟" value="30"></el-option>
              <el-option label="一小时" value="60"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="formInline.time !== 'Min'" label="数据">
            <el-select v-model="formInline.data" placeholder="选择时间段">
              <el-option label="平均值" value="平均值"></el-option>
              <el-option label="最小值" value="最小值"></el-option>
              <el-option label="最大值" value="最大值"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker
              v-model="formInline.timeLine"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="getDate(onGetData, 'notChangePage')"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="stateClass">
          状态:
          <div :class="judgeState ? 'greenLight' : 'redLight'"></div>
          <div style="font-size: 0.9rem; margin-top: 3px">
            {{ this.deviceStatus }}
          </div>
        </div>
      </div>
    </div>
    <div class="gasTable">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column fixed align="center" label="设备名称" width="90">
          <template slot-scope="{ row }">
            {{ row.sensorId ? row.sensorId : row.DTUId }}
          </template>
        </el-table-column>
        <el-table-column fixed align="center" label="时间" width="100">
          <template slot-scope="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <div v-if="tableData.length !== 0">
          <!-- 分钟的 -->
          <div v-if="select === 1">
            <el-table-column
              align="center"
              v-for="(item, index) in tableData[0].DTUDataDetail"
              :key="item.key"
              width="120"
            >
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.DTUDataDetail[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
          <!-- 10 30 60  -->
          <div v-else-if="select === 2">
            <el-table-column
              align="center"
              v-for="(item, index) in tableData[0].avg"
              :key="item.key"
              width="120"
            >
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.avg[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
          <!-- 最小值 -->
          <div v-else-if="select === 3">
            <el-table-column
              align="center"
              v-for="(item, index) in tableData[0].min"
              :key="item.key"
              width="120"
            >
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.min[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
          <!-- 最大值 -->
          <div v-else-if="select === 4">
            <el-table-column
              align="center"
              v-for="(item, index) in tableData[0].max"
              :key="item.key"
              width="120"
            >
              <template slot="header" slot-scope="">
                <div class="tableHead">{{ item.key }}</div>
                <div class="tableHead">({{ item.unit }})</div>
              </template>
              <template slot-scope="{ row }">
                <div>
                  {{ row.max[index].value }}
                </div>
              </template>
            </el-table-column>
          </div>
        </div>
      </el-table>
    </div>

    <div
      class="block"
      style="display: flex; flex-direction: row-reverse; margin-top: 10px"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currPage"
        :page-sizes="[10, 20, 30, 40]"
        :currPage-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  roastHisDatagetAll,
  roastHisDatagetCornData,
  findByDeviceTypeId,
} from "@/api/dataCenter.js";
export default {
  name: "steepContent",
  data() {
    return {
      pageSize: 10,
      currPage: 1,
      devicecode: "",
      total: null,
      deviceTypeId: "61d986ebfca8f66ec93084ad",
      control: {
        data: "",
        show: false,
      },
      formInline: {
        equip: "c1",
        data: "平均值",
        time: "Min",
        timeLine: null,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      tableData: [],
      shebei: [],
      deviceStatus: null,
      select: 1,
      deviceTypes: "",
    };
  },
  created() {},
  mounted() {
    this.getTypes();
    setTimeout(() => {
      this.getAllData();
    }, 1);
  },
  computed: {
    judgeState() {
      // if (this.deviceStatus === '正常') {
      //   return true
      // } else {
      //   return false
      // }
      return true;
    },
  },
  watch: {
    "formInline.equip": function () {
      console.log(this.formInline.equip);
    },
  },
  methods: {
    // 获取设备
    getshebeis() {
      getshebei().then((res) => {
        console.log(1111111);

        this.shebei = res.data.data;
        console.log(this.shebei);
      });
    },
    onGetData(res) {
      const test = res.code === 200 ? "查询成功" : "暂无数据";
      this.$message({
        customClass: "mess-info",
        message: test,
      });
    },
    getDate() {
      console.log(this.formInline.time, "这是时间粒度");
      if (this.formInline.time === "Min") {
        console.log(1);
        this.select = 1;
        this.getAllData();
      } else {
        console.log(2, "324");
        this.select = 2;
        if (this.formInline.data === "最小值") {
          this.select = 3;
        } else if (this.formInline.data === "最大值") {
          this.select = 4;
        }
        this.getCornData();
      }
    },
    getAllData(onGetData, ret) {
      const that = this;
      if (that.formInline.timeLine === null) {
        that.formInline.timeLine = ["", ""];
      }
      // if (ret === 'notChangePage') {
      //   this.currPage = 1
      // }
      // const params = {
      //   BoxId: '2da580adb26b4a12accd4aec80e04656',
      //   pageSize: that.pageSize,
      //   currPage: that.currPage,
      //   dataTime: that.formInline.time,
      //
      // }
      // if (that.formInline.time === 'Min') {
      //   that.control.show = false
      // } else {
      //   that.control.data = that.formInline.data
      //   that.control.show = true
      // }
      // console.log('?',1);
      console.log(that.formInline.timeLine[0]);
      const val = {
        currPage: that.currPage,
        pageSize: that.pageSize,
        code: that.formInline.equip,
        startTime: that.formInline.timeLine[0],
        endTime: that.formInline.timeLine[1],
      };
      console.log(val);
      // roastDatagetAll(val)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       // console.log(params);
      //       console.log("焙烧", res.data.data.data);
      //       // console.log(that.control.show)
      //       that.tableData = res.data.data.data;
      //       // that.DTUDate = that.tableData[0].DTUData[0].DTUDataDetail;
      //       // console.log(that.tableData);
      //       // that.total = res.data.data.totalCount
      //       // that.deviceStatus = res.data.data.deviceStatus
      //       // if (that.formInline.time === 'Min') { that.control.show = false } else { that.control.data = that.formInline.data; that.control.show = true }
      //     }
      //     if (onGetData) onGetData(res.data);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
      roastHisDatagetAll(val).then((res) => {
        console.log("11", res);
        if (res.data.data.data !== null) {
          that.tableData = res.data.data.data;
          that.total = res.data.data.count;
          console.log(that.tableData, "z123");
        }
      });
    },
    // 获取10 30 60 数据
    getCornData() {
      const that = this;

      const val = {
        currPage: that.currPage,
        pageSize: that.pageSize,
        code: that.formInline.equip,
        interval: that.formInline.time,
        startTime: that.formInline.timeLine[0],
        endTime: that.formInline.timeLine[1],
      };
      // console.log(val);
      roastHisDatagetCornData(val).then((res) => {
        console.log("222", res);
        if (res.data.code === 200 && res.data.data.data.length !== 0) {
          that.tableData = res.data.data.data;
          that.total = res.data.data.count;
          // console.log(that.tableData);
        }
      });
    },
    getTypes() {
      findByDeviceTypeId().then((res) => {
        console.log("设备类型", res);
        this.deviceTypes = res.data.data;
      });
    },
    getvalue(val) {
      val = parseFloat(val);
      // console.log(val);
      return val < 0 ? 0 : val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(123);
      this.getAllData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      console.log(234);
      if (this.formInline.time == "Min") {
        this.getAllData();
      } else {
        this.getCornData();
      }
    },
  },
};
</script>

<style  scoped>
 .el-pager .active {
  background-color: $primary !important;
}
 .el-table .el-table__cell {
  padding: 4px 0;
}
.container {
  .cardTop {
    background-color: #fff;
    padding: 15px 0 5px 25px;
    margin-bottom: 15px;
  }
  .gasTable {
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px 20px;
  }
  .seachAndState {
    display: flex;
    justify-content: space-between;
    .select-equip {
      .el-input__inner {
        width: 150px;
      }
    }
    .stateClass {
      display: flex;
      height: 100%;
      padding: 5px 10px 10px 20px;
      width: 200px;
      .greenLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(133, 231, 163);
        border-radius: 0.4rem;
        border: 1px solid rgba(41, 241, 101, 0.349);
      }
      .redLight {
        margin: 6px 3px 4px 15px;
        width: 0.7rem;
        height: 0.7rem;
        background-color: rgb(219, 99, 99);
        border-radius: 0.4rem;
        border: 1px solid rgba(241, 148, 41, 0.349);
      }
    }
  }
}
</style>
